<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.baba{
				width: 200px;
				height: 200px;
				background: skyblue;
			}
			
			.son1{
				width: 100px;
				height: 100px;
				background: pink;
			}
			.baba::after{
				content: '';
				display: inline-block;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="baba">
			<div class="son1"></div>
			<div class="son2"></div>
			<div class="son3"></div>
		</div>
		<script type="text/javascript">
			var baba = document.querySelector('.baba');
			var son1 = document.querySelector('.son1');
			
			//setAttribute(属性名, 属性值)
			son1.setAttribute('style','width:150px;');

			son1.setAttribute('id','son');
			
			//getAttribute(属性名)
			son1.getAttribute('id');
			
			//removeAttribute(属性名)
			son1.removeAttribute('id');
			
			//style样式属性  = 属性值
			baba.style.backgroundColor = 'deepskyblue';
			baba.style.height = '400px';
			
			//style.cssText = '属性样式 :属性值;'
			var str = 'width:500px;' + 'height:900px; background-color:#ccc;';
			baba.style.cssText = str;
			
			
			//样式计算属性 (只读) window.getComputedStyle 最好使用getPropertyValue获取属性值（ 防止IE和其他不同浏览器的属性名不同）
			var baba_width = window.getComputedStyle(baba,null).getPropertyValue('display');
			console.log(baba_width);
			console.log(window.getComputedStyle(baba).backgroundColor);
			var baba_after = window.getComputedStyle(baba,'::after').getPropertyValue('width');
			console.log(baba_after);
			//IE9以下
			var f = baba.currentStyle;
		
			/*
			 //获取当前样式

				function getStyle(element, att){
				
				    //特性侦测
				
				    if(window.getComputedStyle){
				
				        //优先使用W3C规范
				
				        return window.getComputedStyle(element).getPropertyValue(att);
				
				    }else{
				
				        //针对IE9以下兼容
				
				        return element.currentStyle[att];
				
		    	}
		    	
		    	}
			 * */
			
			
			
			//控制class
			//className =字符串		容易覆盖之前的数据
			var baba_className = baba.className;
			console.log(baba_className);
			baba.className = 'BaBa';
			
			
			//classList 	类名列表
			var baba_cl = baba.classList;
			console.log(baba_cl);
			//激活类
			
			//增加
			baba.classList.add('active');
			baba.classList.add('aaa','bbb','ccc');
			
			//删除
			baba.classList.remove('BaBa');
			console.log(baba.classList.contains('bbb','ccc'));
			
			//切换
			var b = baba.classList.toggle('bb');
			console.log(b);
		</script>
	</body>
</html>
